/**
 * 报事处理列表
 * @author kobe
 * @date   2016/05/18
 */

import NoData from "../components/NoData";
import PullRefresh from "../components/mui/PullRefresh.js";

(function( lf, r) {
    var ajax = lf.utils.ajax,
        RC= r.createClass;



    var ListGroup = RC({
        getInitialState: function () {
            return ({
                noData: {
                    span_text: '您的报事已全部处理啦',
                    //btn_text: '去报事',
                    //page_url: 'report.html',
                    //page_title: '报事',
                },
            });
        },
        render: function () {
            var setList = this.props.data.map(function (data) {
                return (
                    <List data={data}/>
                )
            })
            if (this.props.data.length) {
                return (
                    <div className="list-group" id="listGroup">
                        {setList}
                    </div>
                )
            } else {
                return <NoData data={this.state.noData}/>
            }

        }
    });
    var List = RC({
        render: function () {
            var data = this.props.data,
                fmt = 'yyyy-MM-dd hh:mm',
                reportTime = lf.utils.format(data.createTime, fmt);
            return (
                <a className="list mui-table-view" href="javascript:;" ref="toDetail">
                    <div className="list-title">
                        <span className="name">{data.num} {data.name }</span>
                        <span className="time">{reportTime}</span>
                    </div>
                    <p className="list-text">{data.content}</p>
                </a>
            )
        },
        componentDidMount: function () {
            r.findDOMNode(this.refs.toDetail).addEventListener('tap', function () {
                lf.bridgeJs.doAction(`report-detail.html?eventId=${this.props.data.id}`
                    , '处理详情');
            }.bind(this));
        }
    });

    var Root = r.createClass({
        getInitialState: function () {
            return {
                list: [{
                    reporterName: '',
                    reportTime: '',
                    content: '',
                    houseNum: ''
                }],
                user:''
            }
        },
        getList: function (page, shouldAppend) {

            if (!page) page = 1;

            var me = this;
            me.setState({loadingStatus: 'block'});

            ajax({
                data: {
                    staffId: this.state.user.id,
                    page: page,
                },
                success: function (data) {
                    //console.log(data);
                    //成功
                    if ( data.code == '200' ) {
                        // console.log(data.dataList);

                        let resultList = data.dataList,
                            maxCount = data.maxCount,
                            appendedList;


                        if(shouldAppend){
                            appendedList = me.state.list
                            $.each(resultList, function (i,item) {
                                appendedList.push(item);
                            });

                            mui('#pullrefresh')
                                .pullRefresh()
                                .endPullupToRefresh((appendedList.length == maxCount)); //refresh completed

                            me.setState({
                                list: appendedList,
                                loadingStatus: 'none',
                            });

                        }
                        else {
                            me.setState({
                                list: resultList,
                                loadingStatus: 'none',
                            });
                        }
                    }
                    else {
                        alert(data.desc);
                    }
                }
            }, lf.api.report.list);

        },
        componentWillMount: function () {
            var me = this;


            //TODO 在最外层getUser,参考 approval-list
            lf.appJs.getUser(userInfo => {
                me.setState({user:userInfo});
                me.getList();

                lf.appJs.refresh(() => this.getList());

            });

        },
        render: function () {
            return (
                <div className="report-list">
                    <ListGroup data={this.state.list} getList={this.getList}/>
                </div>
            )
        },
        componentWillReceiveProps: function (nextProps) {
            var page = nextProps.page;
            this.getList(page, true)
        }
    });

    var PullRefreshCon = React.createClass({
        getInitialState: function () {
            return {
                page: 1,
            }
        },
        pullupFn: function () {
            var newPage = ++this.state.page;
            this.setState({page: newPage});
        },
        render: function () {
            var me = this;
            return <PullRefresh pullupFn={me.pullupFn} data={<Root page={me.state.page}/>}/>;
        }
    });

    r.render(
        <PullRefreshCon />,
        document.getElementById('root'), function () {
            $('#root').css('background', 'none');
        }
    )

})(liefeng, React)
